<template>
  <!--  指标属性  -->
  <div class="app-container">
    <search-form
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery"
    />
    <hk-table
      :loading="loading"
      :table-data="tableList"
      :table-columns="tableFieldList"
      :default-expand-all="isExpandAll"
      :show-pag="true"
      :operate="true"
      :table-height="80"
      :query-params="queryParams"
      rowkey="id"
      :total="total"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @changePage="changePage"
    >
      <template #operate="scope">
        <el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑 </el-button>
      </template>
    </hk-table>

    <!-- 添加或修改部门对话框 -->
    <edit-dialog ref="editDialogRef" :edit-data="tableData" @handleDialog="handleDialog" />
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform'
import HkTable from '@/components/Hk-Table'
import editDialog from '@/components/Dialogs/AttrDia.vue'
import { getTableList } from '@/api/icp/metricsDict'

export default {
  name: 'TagsManage',
  components: { editDialog, SearchForm, HkTable },
  data() {
    return {
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      attrList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        queryKeyWords: undefined,
        size: 10,
        current: 1
      },
      tableList: [],
      filterInfo: {
        fieldList: [{ label: '关键字', type: 'input', field: 'queryKeyWords' }]
      },
      tableFieldList: [
        { label: '指标属性名称', param: 'dictKey' },
        { label: '编码', param: 'dictValue' }
      ],
      tableData: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询部门列表 */
    getList() {
      this.loading = true
      getTableList(this.queryParams).then((res) => {
        this.loading = false
        this.tableList = res.list
        this.total = res.total
      })
    },

    /** 搜索按钮操作 */
    handleQuery(value) {
      this.queryParams.current = 1
      this.queryParams.queryKeyWords = value.queryKeyWords
      this.getList()
    },
    /** 重置按钮*/
    resetQuery() {
      this.queryParams.queryKeyWords = undefined
      this.getList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.tableData = row
      this.$refs.editDialogRef.open = true
    },
    /** 分页*/
    changePage(value) {
      this.getList()
    },
    /** 弹窗触发保存、取消的回调函数*/
    handleDialog(value) {
      if (value) {
        this.getList()
      }
      this.tableData = {}
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table {
  margin-top: 0 !important;
}

.app-container {
  display: flex;
  flex-direction: column;
  .targetTable {
    flex: 1;
    overflow:hidden;
  }
}
</style>
